<template>
  <view class="container">
    <pap-navbar title="菜单" bgColor="transparent" />
    <view class="grow min-h-0 flex flex-col">
      <view class="search-bar">
        <u-search
          placeholder="请输入要查询的菜单"
          v-model="keyword"
          :clearabled="true"
          :showAction="false"
        />
      </view>
      <view class="grow min-h-0">
        <pap-category :list="menuList" />
      </view>
    </view>
    <pap-tabbar tabIndex="1" />
  </view>
</template>

<script>
import { handleTree } from '@/utils'
const menuData = [
  { id: 0, name: '质量', pid: null },
  { id: 1, name: '水泥拌合站', pid: 0 },
  { id: 2, name: '实时动态', pid: 1 },
  { id: 3, name: '理论配合比', pid: 1 },
  { id: 4, name: '超标记录', pid: 1 },
  { id: 5, name: '施工配合比', pid: 1 },
  { id: 6, name: '浇筑令', pid: 1, path: '/subPages/pouring-order/list' },
  { id: 7, name: '沥青拌合站', pid: 0 },
  { id: 8, name: '实时动态', pid: 7 },
  { id: 9, name: '生产配合比', pid: 7 },
  { id: 10, name: '超标记录', pid: 7 },
  { id: 11, name: '安全', pid: null },
  { id: 12, name: '验枪', pid: 11 },
  { id: 15, name: '关保险', pid: 12 },
  { id: 16, name: '卸弹匣', pid: 12 },
  { id: 17, name: '上膛', pid: 12 },
  { id: 18, name: '开保险', pid: 12 },
  { id: 19, name: '击发', pid: 12 },
  { id: 20, name: '关保险', pid: 12 },
  { id: 21, name: '上弹匣', pid: 12 },
  { id: 22, name: '安全二', pid: 11 },
  { id: 23, name: '安全三', pid: 11 },
  { id: 24, name: '环保', pid: null },
  { id: 25, name: '环保一', pid: 15 },
  { id: 26, name: '进度', pid: null },
  { id: 27, name: '其他', pid: null }
]
export default {
  data() {
    return {
      keyword: '',
      menuList: handleTree(menuData, 'id', 'pid', 'children')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: white;

  .search-bar {
    padding: 28rpx 32rpx 36rpx;
  }
}
</style>
